<template>
  <div class="content">
    <!-- 标题 -->
    <div class="title">
      <span>我的订单</span>
    </div>
    <!-- 内容 -->
    <div class="container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="first" class="all-order">
          <div class="all-title">
            <span class="details">订单详情</span>
            <span class="name">员工姓名</span>
            <span class="money">金额</span>
            <span class="state">状态</span>
          </div>
          <div v-for="(item, index) in data1" :key="index">
            <div class="all-cont" v-if="item.state != 2">
              <!-- <div v-if="item.state!=2"> -->
              <p>
                <span class="alltime">{{
                  new Date(item.start_time * 1000).toLocaleString()
                }}</span>
                <span class="allordernumber">订单号:{{ item.created_at }}</span>
              </p>
              <div class="all-cont-div">
                <div class="allimg">
                  <img
                    v-if="item.work_user.length != 0"
                    :src="`http://housekeepi.com/` + item.work_user[0].icon"
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="allcont">
                  {{ item.province }}{{ item.city }}{{ item.area }}
                </p>
                <span class="allusername" v-if="item.work_user.length != 0">{{
                  item.work_user[0].nick_name
                }}</span>
                <span class="allpay">
                  {{
                    Math.ceil(
                      ((item.end_time - item.start_time) / 1000 / 1000) * 24
                    ) * item.money
                  }}元
                </span>
                <el-button
                  :disabled="item.state == 4"
                  size="medium"
                  type="primary"
                  @click="deal(item.work_id, item.state)"
                  class="allbtn"
                  >取消预约<i class="el-icon-warning el-icon--right"></i
                ></el-button>
              </div>
              <div class="relax">
                <span>用户电话:{{ item.phone }}</span>
                <span>员工电话:{{ item.work_user[0].phone }}</span>
              </div>
              <!-- </div> -->
            </div>
          </div>
        </el-tab-pane>

        <!-- 生效订单 -->
        <el-tab-pane label="生效订单" name="second">
          <div class="all-title">
            <span class="details">订单详情</span>
            <span class="name">用户</span>
            <span class="money">金额</span>
            <span class="state">状态</span>
          </div>
          <div class="effect-cont">
            <div class="eff-cont" v-for="(item, index) in data2" :key="index">
              <p>
                <span class="efftime">{{
                  new Date(item.start_time * 1000).toLocaleString()
                }}</span>
                <span class="effordernumber">订单号:{{ item.created_at }}</span>
              </p>
              <div class="eff-cont-div">
                <div class="effimg">
                  <img
                    v-if="item.work_user.length != 0"
                    :src="`http://housekeepi.com/` + item.work_user[0].icon"
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="effcont">
                  {{ item.province }}{{ item.city }}{{ item.area }}
                </p>
                <span class="effusername" v-if="item.work_user.length != 0">{{
                  item.work_user[0].nick_name
                }}</span>
                <span class="effpay">
                  {{
                    Math.ceil(
                      ((item.end_time - item.start_time) / 1000 / 1000) * 24
                    ) * item.money
                  }}元
                </span>
                <el-button
                  size="medium"
                  type="primary"
                  @click="suerchange(item.work_id, index)"
                  class="effbtn"
                  ref="demo"
                  >{{ item.msg2 }}</el-button
                >
              </div>
              <div class="relax">
                <span>用户电话:{{ item.phone }}</span>
                <span>员工电话:{{ item.work_user[0].phone }}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 待评价 -->
        <el-tab-pane label="待评价" name="third">
          <div class="all-title">
            <span class="details">订单详情</span>
            <span class="name">用户</span>
            <span class="money">金额</span>
            <span class="state">状态</span>
          </div>
          <div class="effect-cont">
            <div class="eff-cont" v-for="(item, index) in data3" :key="index">
              <p>
                <span class="efftime">{{
                  new Date(item.start_time * 1000).toLocaleString()
                }}</span>
                <span class="effordernumber">订单号:{{ item.created_at }}</span>
              </p>
              <div class="eff-cont-div">
                <div class="effimg">
                  <img
                    v-if="item.work_user.length != 0"
                    :src="`http://housekeepi.com/` + item.work_user[0].icon"
                    width="100%"
                    height="100%"
                  />
                </div>
                <p class="effcont">
                  {{ item.province }}{{ item.city }}{{ item.area }}
                </p>
                <span class="effusername" v-if="item.work_user.length != 0">{{
                  item.work_user[0].nick_name
                }}</span>
                <span class="effpay">
                  {{
                    Math.ceil(
                      ((item.end_time - item.start_time) / 1000 / 1000) * 24
                    ) * item.money
                  }}元
                </span>
                <el-button
                  size="medium"
                  type="primary"
                  @click="tanchuang(index)"
                  class="effbtn"
                  ref="demo"
                  >评价</el-button
                >
              </div>
              <div class="relax">
                <span>用户电话:{{ item.phone }}</span>
                <span>员工电话:{{ item.work_user[0].phone }}</span>
              </div>
              <div class="block" v-if="a === index">
                <div class="we">
                  <el-link type="success">平台服务:</el-link
                  ><el-rate v-model="value" :colors="colors" class="change">
                  </el-rate>
                  <el-link type="success">员工服务:</el-link
                  ><el-rate v-model="value1" :colors="colors" class="change">
                  </el-rate>
                  <el-link type="success">员工完成度:</el-link
                  ><el-rate v-model="value2" :colors="colors" class="change">
                  </el-rate>
                  <el-link type="success">员工态度:</el-link
                  ><el-rate v-model="value3" :colors="colors" class="change">
                  </el-rate>
                </div>
                <div class="grid">
                  <el-link type="danger">内容</el-link>
                  <el-checkbox-group v-model="checkboxGroup1">
                    <el-checkbox-button
                      v-for="city in cities"
                      :label="city"
                      :key="city"
                      >{{ city }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                  <el-link type="success">你的留言</el-link>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea1"
                    width='100%'
                  >
                  </el-input>
                  <el-button type="success" round @click="comments(item.work_id)" class="btn10">
                    提交评价
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      checkboxGroup1: ["很专业"],
      cities: ["很专业", "服务态度好", "效率高", "会二次选择我们"],
      textarea1: "",
      a: "",
      activeName: "first",
      obj: "",
      data1: [],
      token: "",
      data2: [],
      state: "",
      data3: [],
      textarea: "",
      value: null,
      value1: null,
      value2: null,
      value3: null,
      colors: ["#99A9BF", "#F7BA2A", "#FF9900"],

      data4: [{}, {}, {}],
    };
  },
  computed: {
    ...mapState(["enddata"]),
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    open2() {
      this.$message({
        message: "谢谢你的评论",
        type: "success",
      });
    },
    deal(val, sta) {
      if (sta != 4) {
        this.state = "2";
        this.myaxios({
          url: "http://housekeepi.com/api/workModify",
          method: "post",
          data: {
            token: this.token,
            work_id: val,
            state: this.state,
          },
        })
          .then((e) => {
            console.log(e.data);
            if (e.data.code == 2000) {
              //   console.log();
              console.log(this.data1);
              this.myaxios({
                url: "http://housekeepi.com/api/workList",
                method: "post",
                data: {
                  token: this.token,
                  work_type: "1",
                  work: 0,
                },
              })
                .then((e) => {
                  console.log(e.data.data);
                  let cachearr = [];
                  res.data.data.forEach((item) => {
                    if (item.work_user.length === 0) {
                      console.log(123);
                      this.obj = {
                        icon: "app/pic/20210123/20210123090316401.jpg",
                        nick_name: "张涛",
                      };
                      item.work_user.push(this.obj);
                    }
                  });
                  cachearr = e.data.data;
                  cachearr.map((item) => {
                    if (item.state != 2) {
                      this.data1.push(item);
                    }
                  });
                  console.log(this.data1);
                })
                .catch(() => {
                  console.log("error");
                });
            } else {
              confirm("不可重复操作");
            }
          })
          .catch(() => {
            console.log("error");
          });
      }
    },
    changestate(val) {
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: this.token,
          state: "4",
          work_id: val,
        },
      }).then((vel) => {
        console.log(vel);
      });
    },
    suerchange(val, idx) {
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: this.token,
          state: "8",
          work_id: val,
        },
      }).then((a) => {
        if (a.data.code == 2000) {
          //   console.log();
          console.log(this.data1);
          this.myaxios({
            url: "http://housekeepi.com/api/workList",
            method: "post",
            data: {
              token: this.token,
              work_type: "1",
              work: 0,
            },
          })
            .then((e) => {
              console.log(e.data.data);
              let cachearr = [];
              res.data.data.forEach((item) => {
                if (item.work_user.length === 0) {
                  console.log(123);
                  this.obj = {
                    icon: "app/pic/20210123/20210123090316401.jpg",
                    nick_name: "张涛",
                  };
                  item.work_user.push(this.obj);
                }
              });
              cachearr = e.data.data;

              for (let i = 0; i < cachearr.length; i++) {
                if (cachearr[j].state == "4") {
                  this.data2.push(cachearr[i]);
                  // this.data3[i].push(this.msg2);
                }
              }
              console.log(this.data2);

              for (let j = 0; j < cachearr.length; j++) {
                if (cachearr[j].state == "8") {
                  this.data3.push(cachearr[j]);
                  // this.data3[i].push(this.msg2);
                }
              }
              console.log(this.data3);
            })
            .catch(() => {
              console.log("error");
            });
        } else {
          confirm("不可重复操作");
        }
      });
      console.log(this.$refs.demo);
      for (let i = 0; i < this.$refs.demo.length; i++) {
        if (idx == i && this.data1[i].state === 8) {
          this.data2[i].msg2 = "已完成";
        }
      }
    },
    tanchuang(index) {
      this.a = index;
    },

    comments(val) {
      let token = localStorage.getItem("token");
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: String(token),
          work_id: String(val),
          state: "9",
        },
      })
        .then((e) => {
          console.log(e);
          this.open2();
        })
        .catch(() => {
          console.log("error");
        });
    },
    //
  },
  mounted() {
    this.token = window.localStorage.getItem("token");
    this.myaxios({
      url: "http://housekeepi.com/api/workList",
      method: "post",
      data: {
        token: this.token,
        user_type: "1",
        work: "0",
      },
    }).then((res) => {
      res.data.data.forEach((item) => {
        if (item.work_user.length === 0) {
          console.log(123);
          this.obj = {
            icon: "app/pic/20210123/20210123090316401.jpg",
            nick_name: "张涛",
            phone: "15183169782",
          };
          item.work_user.push(this.obj);
        }
      });
      this.data1 = res.data.data;
      console.log(this.data2);
      for (let i = 0; i < this.data1.length; i++) {
        console.log(11111);
        if (this.data1[i].state == "4") {
          this.data2.push(this.data1[i]);

          this.data2[i].msg2 = "进行中";
        }
      }
      for (let j = 0; j < this.data1.length; j++) {
        if (this.data1[j].state == "8") {
          this.data3.push(this.data1[j]);
          // this.data3[i].push(this.msg2);
        }
      }
      console.log(this.data3);
      // console.log(this.data2);
      // if (res.data.code === 2000) {
      //   for (let i = 0; i < this.data1.length; i++) {
      //     this.changestate(this.data1[i].work_id)

      //   }

      // }

      //
    });
    //
  },
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}
.grid {
  display: grid;
  justify-content: center;
  align-items: center;
}
.content {
  border-top: 1px solid #f5f5f5;
  background-color: #f5f5f5;
  padding-bottom: 50px;
}
.title {
  width: 70%;
  height: 60px;
  margin: 20px auto 0;
  line-height: 60px;
  background-color: #fff;
  text-align: left;
  font-size: 20px;
  padding: 0 20px;
}
.title > span {
  margin-left: 20px;
}
/* 内容区域 */
.container {
  border-top: 1px solid #fff;
  width: 70%;
  margin: 20px auto 0;
  background-color: #fff;
  padding: 0 20px;
}
/* 内容区域all订单部分 */
.all-cont {
  min-height: 100px;
}
.all-title {
  display: flex;
  background-color: #f5f5f5;
}
.all-title > span {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.details {
  width: 60%;
}
.name {
  width: 10%;
}
.money {
  width: 20%;
}
.state {
  width: 10%;
}
/* all区域 */
.all-cont {
  margin-top: 20px;
  border: 1px solid rgb(218, 214, 214);
}
.all-cont > p {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
}
.all-cont > p > span {
  display: inline-block;
  height: 40px;
  line-height: 40px;
}
.alltime {
  margin-left: 20px;
}
.allordernumber {
  margin-right: 20px;
}
.all-cont-div {
  display: flex;
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(218, 214, 214);
}
.all-cont-div > span {
  display: inline-block;
  width: 10%;
  text-align: center;
}
.allimg {
  margin-left: 20px;
  width: 57px;
  height: 61px;
  border-radius: 1px solid rgb(75, 73, 73);
}
.allcont {
  text-align: center;
  margin-left: -20px;
  /* margin-right: 50px; */
  width: 50%;
  height: 61px;
  line-height: 61px;
}
.allusername {
  margin-left: 50px;
  height: 61px;
  line-height: 61px;
}
.all-cont-div > .allpay {
  width: 20%;
  height: 61px;
  line-height: 61px;
}
.allbtn {
  height: 41px;
  margin-top: 12px !important;
  padding-left: 3px;
  padding-right: 3px;
}
.relax {
  position: relative;
}
.relax > span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  margin-left: 20px;
}
.relax > span:nth-of-type(2) {
  position: absolute;
  left: 300px;
}

/* 有效订单 */

.effect-cont {
  min-height: 100px;
}

.eff-cont {
  margin-top: 20px;
  border: 1px solid rgb(218, 214, 214);
}
.eff-cont > p {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
}
.eff-cont > p > span {
  display: inline-block;
  height: 40px;
  line-height: 40px;
}
.efftime {
  margin-left: 20px;
}
.effordernumber {
  margin-right: 20px;
}
.eff-cont-div {
  display: flex;
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(218, 214, 214);
}
.eff-cont-div > span {
  display: inline-block;
  width: 10%;
  text-align: center;
}
.effimg {
  margin-left: 20px;
  width: 57px;
  height: 61px;
  border-radius: 1px solid rgb(75, 73, 73);
}
.effcont {
  text-align: center;
  /* margin-left: 40px; */
  /* margin-right: 50px; */
  width: 50%;
  height: 61px;
  line-height: 61px;
}
.effusername {
  margin-left: 40px;
  height: 61px;
  line-height: 61px;
}
.eff-cont-div > .allpay {
  width: 20%;
  height: 61px;
  /* margin-left: 10px; */
  line-height: 61px;
}
.effbtn {
  height: 41px;
  margin-top: 10px !important;
  padding: 0 5px;
  width: 50px;
  margin-left: 50px;
  margin-right: 20px;
}
.effpay {
  height: 61px;
  line-height: 61px;
  margin-left: 20px;
  /* margin-right: 30px; */
}
.minimainbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.subscribe {
  list-style: none;
  padding: 20px;
}
.subscribe li {
  padding: 10px 15px;
  border-top: 5px solid #eee;
}
.subscribe li .top {
  display: flex;
  justify-content: space-between;
}
.subscribe li .center {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 20% 70%;
  grid-gap: 20px;
  border-bottom: 1px solid #333;
}
.minimain {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
.el-button {
  margin-top: 40px;
}
.ha {
  width: 100px;
  height: 100px;
  background-color: red;
}
.block {
  /* width: 500px; */
  left: 700px;
  /* top: 100px; */
  display: grid;
  grid-template-columns:  35% 65%;
  grid-gap: 5px;
  background-color: #fff;
  height: 250px;
  justify-content: space-between;
}
/* .block > div:nth-of-type(1) {
  width: 70%;
}
.block > div:nth-of-type(2) {
  width: 30%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 50px;
} */
.block > .we > .el-link {
  display: inline-block;
  margin-top: 20px;
  margin-left: 10px;
}
.change {
  /* display: inline-block; */
  margin-top: -20px;
  margin-left: 100px;
}
.btn10 {
  width: 100px;
  margin: 20px auto;
}
</style>
